import 'package:flutter/material.dart';
import 'package:flutter_hx/services/app_theme_services.dart';
import 'package:get/get.dart';

import 'pm_logic.dart';

class PmPage extends StatelessWidget {
  const PmPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.put(PmLogic());
    logic.getList();
    return GetBuilder<PmLogic>(
      assignId: true,
      builder: (logic) {
        return Container(
          decoration: const BoxDecoration(
              gradient: LinearGradient(colors: [
            Color.fromRGBO(37, 212, 192, 1),
            Color.fromRGBO(67, 227, 205, 1)
          ])),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0,
              centerTitle: true,
              title: Text("易拍区",
                  style: AppThemeServices.textTheme.h24
                      .bold()
                      .copyWith(color: Colors.white)),
            ),
            body: Column(
              children: [
                Container(
                  //padding: const EdgeInsets.symmetric(horizontal: 10),
                  width: double.infinity,
                  color: Colors.white,
                  child: Column(
                    children: [
                      Container(
                        color: const Color.fromRGBO(247, 248, 250, 1),
                        child: Row(
                          children: [
                            Expanded(
                                child: Container(
                              height: 54.5,
                              decoration: const BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                          "assets/images/pm_time_select.png"),
                                      fit: BoxFit.fill)),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text("10:30",
                                      style: AppThemeServices.textTheme.h20
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  0, 195, 179, 1),
                                              fontWeight: FontWeight.w900)),
                                  const SizedBox(height: 5),
                                  Text("距结束：30:00",
                                      style: AppThemeServices.textTheme.h10
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  0, 195, 179, 1))),
                                ],
                              ),
                            )),
                            Expanded(
                                child: Container(
                              height: 54.5,
                              decoration: const BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                          "assets/images/pm_time_normal.png"),
                                      fit: BoxFit.fill)),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text("10:30",
                                      style: AppThemeServices.textTheme.h20
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  153, 153, 153, 1),
                                              fontWeight: FontWeight.w900)),
                                  const SizedBox(height: 5),
                                  Text("距结束：30:00",
                                      style: AppThemeServices.textTheme.h10
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  153, 153, 153, 1))),
                                ],
                              ),
                            )),
                            Expanded(
                                child: Container(
                              height: 54.5,
                              decoration: const BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                          "assets/images/pm_time_normal.png"),
                                      fit: BoxFit.fill)),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text("10:30",
                                      style: AppThemeServices.textTheme.h20
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  153, 153, 153, 1),
                                              fontWeight: FontWeight.w900)),
                                  const SizedBox(height: 5),
                                  Text("距结束：30:00",
                                      style: AppThemeServices.textTheme.h10
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  153, 153, 153, 1))),
                                ],
                              ),
                            ))
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                listView(logic)
              ],
            ),
          ),
        );
      },
    );
  }

  Widget listView(PmLogic logic) {
    return Expanded(
      child: Container(
        color: const Color.fromRGBO(247, 248, 250, 1),
        child: ListView.builder(
            padding: const EdgeInsets.all(10),
            itemBuilder: (content, index) {
              var map = logic.list[index];
              return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(7.5),
                  ),
                  margin: const EdgeInsets.only(bottom: 10),
                  child: Container(
                    height: 136,
                    padding: const EdgeInsets.all(10),
                    child: Row(
                      children: [
                        AspectRatio(
                          aspectRatio: 1,
                          child: Container(
                            child: Image.network(
                              map['image'],
                              errorBuilder: (_, e, r) => Container(),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Stack(children: [
                            Container(
                              margin: const EdgeInsets.only(left: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    map['name'] ?? '',
                                    maxLines: 1,
                                    style: const TextStyle(
                                        overflow: TextOverflow.ellipsis,
                                        fontSize: 15,
                                        fontWeight: FontWeight.w500,
                                        color: Colors.black),
                                  ),
                                  // const Text(
                                  //   '当日限拍5次',
                                  //   maxLines: 1,
                                  //   style: TextStyle(
                                  //       overflow: TextOverflow.ellipsis,
                                  //       fontSize: 10,
                                  //       fontWeight: FontWeight.w500,
                                  //       color:
                                  //           Color.fromRGBO(150, 151, 153, 1)),
                                  // ),
                                  const SizedBox(
                                    height: 10,
                                  ),
                                  Stack(
                                      alignment: Alignment.centerLeft,
                                      children: [
                                        Container(
                                          padding: const EdgeInsets.symmetric(
                                              vertical: 3),
                                          child: Image.asset(
                                            "assets/images/icon_inventory.png",
                                            fit: BoxFit.cover,
                                          ),
                                        ),
                                        Container(
                                            padding: const EdgeInsets.only(
                                                left: 8.5),
                                            child: Text(
                                              '仅剩${map['unsettledNum'] ?? 0}件',
                                              style: const TextStyle(
                                                  fontWeight: FontWeight.w300,
                                                  fontSize: 8,
                                                  color: Colors.white),
                                            ))
                                      ]),
                                  // RichText(
                                  //     text: const TextSpan(
                                  //         text: '原价：',
                                  //         style: TextStyle(
                                  //             fontSize: 11,
                                  //             fontWeight: FontWeight.w500,
                                  //             color: Color.fromRGBO(
                                  //                 153, 153, 153, 1)),
                                  //         children: [
                                  //       TextSpan(
                                  //           text: '¥1999.00',
                                  //           style: TextStyle(
                                  //             fontSize: 11,
                                  //             fontWeight: FontWeight.w500,
                                  //             color: Color.fromRGBO(
                                  //                 153, 153, 153, 1),
                                  //             decoration:
                                  //                 TextDecoration.lineThrough,
                                  //             decorationColor: Color.fromRGBO(
                                  //                 153, 153, 153, 1),
                                  //           ))
                                  //     ])),
                                  // const SizedBox(
                                  //   height: 5,
                                  // ),
                                  Expanded(child: Container()),
                                  RichText(
                                      text: TextSpan(
                                          text: '¥',
                                          style: const TextStyle(
                                              fontSize: 13,
                                              fontWeight: FontWeight.w500,
                                              color: Color.fromRGBO(
                                                  255, 77, 77, 1)),
                                          children: [
                                        TextSpan(
                                            text: ((map['amount'] ?? 0.00) /
                                                100).toStringAsFixed(2),
                                            style: const TextStyle(
                                              fontSize: 20,
                                              fontWeight: FontWeight.w500,
                                              color: Color.fromRGBO(
                                                  255, 77, 77, 1),
                                            ))
                                      ])),
                                  const SizedBox(
                                    height: 10,
                                  )
                                ],
                              ),
                            ),
                            Positioned(
                              bottom: 10,
                              right: 0,
                              child: GestureDetector(
                                onTap: () {
                                  logic.toSnapUp(map['goodsId']);
                                },
                                child: Container(
                                  decoration: const BoxDecoration(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(45)),
                                      gradient: LinearGradient(colors: [
                                        Color.fromRGBO(14, 200, 182, 1),
                                        Color.fromRGBO(66, 227, 204, 1)
                                      ])),
                                  width: 70,
                                  height: 35.5,
                                  child: const Center(
                                    child: Text(
                                      '抢购',
                                      style: TextStyle(
                                          fontWeight: FontWeight.w500,
                                          fontSize: 13,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ),
                            )
                          ]),
                        )
                      ],
                    ),
                  ));
            },
            itemCount: logic.list.length),
      ),
    );
  }
}
